<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        .pt5{ padding-top: 5px!important; }
        .table>tbody>tr>td{ font-size: 14px; font-weight: 200!important }
        .table>thead>tr>th{padding-bottom: 0px; font-size: 14px; font-weight: 400 }
        .table tr>td>a{ color:#696969;}
        .table tr>td{ font-size: 14px }
        .titleHead { font-family: 宋体; font-weight: 400 }
        .edit{ color:#3276b1 }
        .del{ color:#777; margin-left: 10px }
        .lb{ font-size: 13px!important; font-weight: 200px!important }
        td>label{font-weight: 100}

    </style>
    <link rel="stylesheet" type="text/css" href="../lib/css/footable.bootstrap.min.css">
    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
</head>
<body class="flat-blue">
<div class="app-container H100" ng-app="myApp" ng-controller="myCtrl">
<div class="row content-container H100">
<div ng-include="'menus.html'" onload="loadReady()"></div>
<div class="container-fluid H100 pb15">
<div class="side-body padding-top H100" id="main" style="padding-top:70px">
    <!------------------Main---------------->
    <div class="H100" style="width:99%; background-color:#fff; position:relative">
        <div class="panel panel-default mt20">
            <div class="panel-heading pHead">
                用户组
            </div>
            <div class="panel-body">
                <div style=" padding-bottom:30px">
                <span ng-repeat="g in groups" style="margin-right: 60px; color:{{g.color}}" ng-click="loadUsers(g.level)">
                    <span class="label label-success lb pointer" style="background-color:{{g.color}}; border-color:{{g.color}}"> {{g.name}}</span>
                </span>
            </div>
            </div>
        </div>
        <!-- 用户列表 -->
        <div class="panel panel-default mt20">
            <div class="panel-heading pHead">
                用户列表
            </div>
            <div class="panel-body" style="min-height: 800px; position: relative;background-color: #fff;">
                <table class="table table-striped" style="padding-bottom: 20px"></table>
                <div style="position:absolute; bottom:25px; right:30px">
                    <button style="float: right" ng-click="getNewUser();" class="bt btn btn-primary" data-toggle="modal" data-target="#myModal1">
                        <span class="glyphicon glyphicon-plus"></span> 创建用户
                    </button>
                </div>
            </div>
        </div>

        <!-- <div style="padding: 10px 15px 0px 15px; min-height: 800px; font-size: 16px; background-color: #fff; position: relative">
            <div class="titleHead" style="font-size: 16px">➢用户列表</div>
            
        </div> -->

    </div>


    <!-- 模态框 For Add User -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <p style="font-size: 16px" class="modal-title" id="myModalLabel">
                        创建用户
                    </p>
                </div>
                <!--核心内容-->
                <div class="modal-body" style="min-height: 250px; padding:20px 50px">
                    <table>
                        <tr>
                            <td>用户名</td>
                            <td><input onchange="checkUser()" ng-keyup="newUser.checkText=''" ng-model="newUser.userName" type="text" style="width: 190px" ></td>
                            <td>&nbsp;<span style="color:red">{{newUser.checkUser}}</span></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input ng-model="newUser.password" type="password" style="width: 190px" >
                            <td>&nbsp;<span style="color:blue">{{newUser.password}}</span></td>
                        </tr>
                        <tr>
                            <td>用户组</td>
                            <td>
                                <select ng-model="newUser.level" ng-options="k.level as k.name for k in groups"></select>
                            </td>
                        </tr>
                        <tr>
                            <td>有效时间</td>
                            <td><input ng-model="newUser.leftDay" type="text" style="width: 190px" ></td>
                            <td>&nbsp;(单位：天，-1 代表永久)</td>
                        </tr>
                        <tr>
                            <td>公司名称</td>
                            <td><input ng-model="newUser.company" type="text" style="width: 190px" ></td>
                        </tr>
                        <tr>
                            <td><span style="color:red">{{newUser.error}}</span></td><td>&nbsp;</td>
                        </tr>
                    </table>
                    <div style="margin-top: 1px">
                        <button type="button" class="btn btn-info" ng-click="addUser()"> 提交 </button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- End 模态框 For Add User -->

    <!-- 模态框 For Edit User -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <p style="font-size: 16px" class="modal-title" id="myModalLabe2">编辑用户</p>
                </div>
                <!--核心内容-->
                <div class="modal-body" style="min-height: 250px; padding:20px 50px">
                    <table>
                        <tr>
                            <td>用户</td>
                            <td>{{editUser.userName}}</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input ng-model="editUser.password" type="password" placeholder="******" style="width: 190px" >
                            <td>&nbsp;<span style="color:blue"></span></td>
                        </tr>
                        <tr>
                            <td>公司名称</td>
                            <td><input ng-model="editUser.company" type="text" style="width: 190px" ></td>
                        </tr>
                        <tr>
                            <td>用户组</td>
                            <td>
                                <select ng-model="editUser.level" ng-options="k.level as k.name for k in groups"></select>
                            </td>
                        </tr>
                        <tr>
                            <td>增加时间</td>
                            <td><input ng-model="editUser.addDay" ng-change="editUser.reduceDay=''" type="number" style="width: 190px" ></td>
                            <td>&nbsp;(单位：天，-1 代表永久)</td>
                        </tr>
                        <tr>
                            <td>减少时间</td>
                            <td><input ng-model="editUser.reduceDay" ng-change="editUser.addDay=''" type="number" style="width: 190px" ></td>
                            <td>&nbsp;(单位：天)</td>
                        </tr>
                        <tr>
                            <td style="color:red">登录限制</td>
                            <td>
                                <label><input type="radio" ng-value="1" name="status" ng-model="editUser.status"> 正常</label>
                                <label style="margin-left: 30px">
                                    <input type="radio" ng-value="0" name="status" ng-model="editUser.status"> 禁止登录
                                </label>
                            </td>
                        </tr>
                        <tr style="padding:0px; height:20px">
                            <span style="color:red">{{editUser.error}}</span>
                        </tr>
                    </table>
                    <div style="margin-top: 1px">
                        <button type="button" class="btn btn-info" ng-click="changeUser()"> 提交 </button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- End 模态框 For Edit User -->

    <!------------------End Main---------------------->
</div>  <!--End side-body-->
</div>  <!--End container-fluid-->
</div>  <!--End content-container-->
<div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->


<script type="text/javascript" src="../lib/js/footable.min.js"></script>
<script language="javascript">
    var app = angular.module('myApp', []), _newUser = {}, _scope = null;
    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        _scope = $scope;

        // $scope.selProvince = "全国";
        // $scope.optionType = ['常规装置', '高纯装置', '液体装置'];
        // $scope.optionModel = ['自主运营', '气体投资'];
        var group = getGroups();
        $scope.groups = group.groups;
        $scope.levels = group.levels;
        $scope.newUser = {};
        $scope.getNewUser = function(){
            $scope.newUser = {
                userName: '',
                password: 'abcd',
                company: '中国联通',
                level:1,
                leftDay: 30,
                checkUser:'',
                mode:'admin',
                error:'',
                realName:null,
                status:1,
                telephone:null,
                registerTime: new Date() //.format("yyyy-MM-dd hh:mm:ss")
        };
            _newUser = $scope.newUser;
        };
        $scope.data = [];
        $scope.cacheUser = {};
        $scope.editUser = {};
        $scope.editBack = {};

        //// 计算n天后时间
        function getOffsetDate(_dt, days){
            return new Date(_dt.getTime() + days * 24 * 60 * 60 * 1000).format("yyyy-MM-dd hh:mm:ss");
        }
        function int(n){ if(n=="")return 0; return !n ? 0 : parseInt(n); }

        //// 加载用户列表
        $scope.loadUsers = function (level){
            var lv = level==undefined ? -2 : level;
            ajaxData('get_user_list', {'level':lv}, function(rst){
                $scope.data = rst.data;  
                if(rst.error){
                    alert(rst.message);
                    return;
                }
                loadTable();
            });
        };

        //// 检查用户名是否可用
        $scope.addUser = function (){
            $scope.newUser.error = "";
            var newUser = $scope.newUser;
            if(newUser.userName==""){
                $scope.newUser.error = "请输入账号名";
            }else if(newUser.password==""){
                $scope.newUser.error = "请输入密码";
            }else if(newUser.leftDay==""){
                $scope.newUser.error = "请输入有效时间";
            }
            if($scope.newUser.error != "") return;

            ajaxData('add_user', newUser, function(rst){
                var data = rst.data;
                if(data==-1)$scope.newUser.error = "操作失败，请检查用户名";
                else{
                    $scope.newUser.error = "创建成功！";
                    // 关闭弹出框
                    $scope.newUser.deadline = (parseInt($scope.newUser.leftDay)==-1) ? null :
                            getOffsetDate($scope.newUser.registerTime, $scope.newUser.leftDay);
                    $scope.data.push($scope.newUser);
                    $("#myModal1").modal('hide');
                    loadTable();
                }
            });
        };

        //// 加载用户列表
        function loadTable(data){
            $('.table').html("");
            var data = $scope.data;
            var cols = [{'name':'userName', 'title':'用户'},
                {'name':'realName', 'title':'真实姓名'},
                {'name':'telephone', 'title':'联系方式'},
                {'name':'company', 'title':'公司'},
                {'name':'level', 'title':'级别'},
                //{'name':'registerTime', 'title':'注册时间'},
                {'name':'deadline', 'title':'到期时间'},
                {'name':'status', 'title':'状态'},
                {'name':'operate', 'title':'操作'}
            ];
            //// 数据呈现
            var rows = data.map(function(d, i){
                $scope.cacheUser[d.userName] = i;
                var limit = (new Date(d.deadline)<new Date());
                return {
                    // companyName:"<a href='companyInfo.html?cp="+ escape(d.companyName) +"&pvn="
                    // +escape(d.province) +"' title='点击查看详情'>" + d.companyName + "</a>",
                    userName: d.userName, realName: d.realName, company: d.company,
                    level: "<label style='color:"+ $scope.levels[d.level].color +"'>"
                            + $scope.levels[d.level].name + "</label>",
                    telephone: d.telephone, registerTime: d.registerTime,
                    deadline: "<label style='color:"+ (limit ? 'red' : 'blue') +"'>"
                            + (d.deadline==null ? '永久' : d.deadline) + "</label>",
                    status: d.status==0 ? '禁止' : '正常',
                    operate: '<span class="glyphicon glyphicon-edit edit pointer" title="编辑" data-user="'+ d.userName +'"></span>' +
                            '<span class="glyphicon glyphicon-remove-circle red del pointer" title="删除" data-user="'+ d.userName +'"></span>'

                };
            });
            // 加载表格
            $('.table').footable({
                "paging": { "enabled": true, 'size':10 },
                "filtering": { "enabled": true },
                "sorting": { "enabled": true },
                "columns": cols,
                "rows": rows
            });
            //// 添加编辑事件
            $('.table').on('click', '.edit', function(d){
                var user = $(this).attr("data-user");
                if(user=="admin"){
                    alert("操作失败，权限不够！");
                    return;
                }

                $scope.editUser = $scope.data[$scope.cacheUser[user]];
                $scope.editUser.addDay = null;
                $scope.editUser.reduceDay = null;
                $scope.editUser.error = '';
                $scope.editBack.level = $scope.editUser.level;
                $scope.editBack.status = $scope.editUser.status;
                $scope.editBack.company = $scope.editUser.company;

                $("#myModal2").modal('show');
                $scope.$apply();
            });
            $('.del').on('click', function(d) {
                var user = $(this).attr("data-user");
                if(user=="admin"){
                    alert("操作失败，权限不够！");
                    return;
                }

                ajaxData('set_user_del', {'userName':user}, function(rst) {
                    if (rst.data == -1)alert("操作失败，权限不够");
                    else {
                        $scope.data.splice($scope.cacheUser[user], 1);
                        loadTable();
                    }
                });

            });
        }
        //// 编辑用户
        $scope.changeUser = function(){
            var user = $scope.editUser;
            if(!user.addDay && !user.reduceDay && (user.password==undefined || user.password=='')
                    && user.company==$scope.editBack.company && user.status==$scope.editBack.status
                    && user.level==$scope.editBack.level){
                return;
            }
            //// 更改资料
            ajaxData('set_user_info', user, function(rst){
                if(rst.data==-1)$scope.editUser.error = "操作失败，请检查设置";
                else $scope.editUser.error = "修改成功！";
                var offsetD = int(user.addDay) - int(user.reduceDay);
                if(int(user.addDay)==-1){
                    $scope.editUser.deadline = null;
                }else if(offsetD!=0){
                    if($scope.editUser.deadline==null)$scope.editUser.deadline = new Date();
                    $scope.editUser.deadline = getOffsetDate(new Date($scope.editUser.deadline), offsetD);
                }
                $scope.$apply();
                loadTable();
                $("#myModal2").modal('hide');
            });

        };

        $scope.loadUsers();
                
    });

    //// 检查用户名是否可用
    function checkUser(){
        var newUser = _newUser;
        var value = newUser.userName;
        if(value=="")return;

        newUser.checkUser = "...";
        ajaxData('check_user_name', { userName:value }, function(rst){
            if(parseInt(rst.data)==1)newUser.checkUser = "该用户已存在";
            else newUser.checkUser = "";
            _scope.$apply();
        });
    }






    
    
    $(document).ready(function(){
        // $("#fullH").heiht();
        //loadViews("view1");
        /*
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
        });
        */
    });


</script>

</body>
</html>
